import { useState } from 'react';
import { Table, Modal, Button } from 'antd';
import { InbizIcon } from '@inbiz/utils';
import Paginations from '../AssignedTaskModal/Paginations';
import { observer } from '@formily/react';
import { TextWidget, getMessage } from '@inbiz/react';
import { afterOperation, clickRow } from '../../utils';
import { claimTasks } from '../../service';
import '../AssignedTaskModal/index.less';

export default observer((props: any) => {
  const {
    dataSource,
    visible,
    $visible,
    getList1,
    getList2,
    choosedTabKey,
    pageData,
    userInfo,
    setLoading,
    loading,
    _pageData,
    condition,
    list,
    searchApplyList,
  } = props;
  const [selectedRowKeys, $selectedRowKeys] = useState([]);
  const columns = [
    {
      title: getMessage('processCenter.instanceNumber'),
      dataIndex: 'processInstanceId',
    },
    {
      title: getMessage('processCenter.taskName'),
      dataIndex: 'stepName',
      ellipsis: true,
    },
    {
      title: getMessage('processCenter.processName'),
      dataIndex: 'processName',
      ellipsis: true,
    },
    {
      title: getMessage('processCenter.tasksId'),
      dataIndex: 'taskId',
    },
  ];
  const queryList = (page, pageSize) => {
    $selectedRowKeys([]);
    getList2(page, pageSize, '3', '', {
      processGroupName: '',
      processDefId: '',
      date: '',
      status: '',
    });
  };
  const receiveItems = () => {
    if (selectedRowKeys.length == 0) {
      Modal.info({
        title: getMessage('processCenter.modalTiptitle'),
        content: getMessage('processCenter.selectRecord'),
        okText: getMessage('processCenter.known'),
      });
    } else {
      const params = {
        claimantId: userInfo?.ID,
        taskIds: selectedRowKeys.join(','),
      };
      Modal.confirm({
        title: getMessage('processCenter.modalTiptitle'),
        content: getMessage('processCenter.confirmToIOperate'),
        okText: getMessage('global.sure'),
        cancelText: getMessage('global.cancel'),
        onOk: () => {
          claimTasks(params).then((res) => {
            afterOperation(res, () => {
              queryList(1, pageData.pageSize);
            });
          });
        },
      });
    }
  };

  const onChange = (selectedRowKeys) => {
    $selectedRowKeys(selectedRowKeys);
  };

  return (
    <Modal
      title={getMessage('processCenter.myClaim')}
      className="claimList"
      onCancel={async () => {
        $visible(false);
        setLoading(true);
        await searchApplyList(choosedTabKey);
        await getList1(
          list?.length == 1 && _pageData.pageIndex != 1
            ? _pageData.pageIndex - 1
            : _pageData.pageIndex,
          _pageData.pageSize,
          choosedTabKey,
          '',
          condition,
        );
        setLoading(false);
      }}
      centered
      footer={null}
      destroyOnClose
      visible={visible}
    >
      <Button onClick={receiveItems} style={{ marginBottom: 10 }}>
        <InbizIcon type="icon-ic-biaodanzujian-wenjianxuanze" />
        <TextWidget>processCenter.claim</TextWidget>
      </Button>
      <Table
        loading={loading}
        dataSource={dataSource}
        columns={columns}
        rowKey="taskId"
        rowSelection={{
          onChange,
          selectedRowKeys,
        }}
        onRow={(record) => {
          return {
            onClick: () => clickRow(record, { onChange, selectedRowKeys }, true),
          };
        }}
        scroll={{ y: 235 }}
        pagination={false}
      />
      {dataSource.length > 0 && <Paginations pageData={pageData} queryList={queryList} />}
    </Modal>
  );
});
